<template>
  <div class="add_goods">
    <Head title="商品发布" :back_num="back_num"/>
    <div class="container">
      <div class="form">
        <!-- list -->
        <div class="form_list">
          <div class="form_list_left" style="width:20%">商品照片</div>
          <div class="form_list_center" style="width:60%">
            <span>(上传你的宝贝展示图，最多9张)</span>
          </div>
          <div class="form_list_right"></div>
        </div>
        <div class="image_box">
          <div class="image_list" v-for="(item,index) in shopImage">
            <img :src="item" alt>
            <div class="del" @click="delImage(index)">
              <i class="iconfont icondelete"></i>
            </div>
          </div>
          <van-uploader
            v-if="shopImage.length<9"
            :after-read="onRead"
            accept="image/jpg, image/jpeg, image/png"
            multiple
          >
            <div class="image_list">
              <img src="../../../static/image/shopEdit_getGoos.png" alt>
            </div>
          </van-uploader>

          <!-- 占位 -->
          <div class="m">
            <img src="../../../static/image/shopEdit_getGoos.png" alt>
          </div>
          <!-- 占位 end-->
        </div>
        <!-- list end -->
        <!-- list -->
        <div class="form_list" style="margin-top:.5rem" @click="showClass_ev">
          <div class="form_list_left">商品分类</div>
          <div class="form_list_center">
            <span v-text="goods_class_name==''?'请选择商品分类':goods_class_name"></span>
          </div>
          <div class="form_list_right">
            <i class="iconfont iconrightArrow"></i>
          </div>
        </div>
        <!-- list end -->
        <!--  -->
        <div class="form_list" style="border:0">
          <div class="form_list_left">商品名称</div>
          <div class="form_list_center">
            <div class="text_number">{{shop_name.length}}/20</div>
          </div>
          <div class="form_list_right"></div>
        </div>
        <div class="text_box">
          <textarea placeholder="请输入商品名称" v-model="shop_name" maxlength="20"></textarea>
        </div>
        <!--  -->
        <!--  -->
        <div class="form_list" style="border:0">
          <div class="form_list_left">商品简要说明</div>
          <div class="form_list_center">
            <div class="text_number">{{shop_message.length}}/50</div>
          </div>
          <div class="form_list_right"></div>
        </div>
        <div class="text_box">
          <textarea placeholder="请简要说明一下商品" v-model="shop_message" maxlength="50"></textarea>
        </div>
        <!--  -->
        <!-- list -->
        <div class="form_list" style="margin-top:.5rem">
          <div class="form_list_left">商品销售价</div>
          <div class="form_list_center">
            <input
              type="number"
              placeholder="用户购买价格(元)"
              v-model="shop_money"
              oninput="if(value.length>11)value=value.slice(0,11)"
            >
          </div>
          <div class="form_list_right"></div>
        </div>
        <!-- list end -->
        <!-- list -->
        <div class="form_list">
          <div class="form_list_left">市场价（选填）</div>
          <div class="form_list_center">
            <input
              type="number"
              placeholder="外面市场对比的销售价格(元)"
              v-model="scj_money"
              oninput="if(value.length>11)value=value.slice(0,11)"
            >
          </div>
          <div class="form_list_right"></div>
        </div>
        <!-- list end -->
        <!-- list -->
        <div class="form_list">
          <div class="form_list_left" style="width:35%">会员折扣（选填）</div>
          <div class="form_list_center" style="width:65%">
            <span style="color:#000">-&nbsp;</span>
            <input
              type="number"
              placeholder="销售价基础上享受的减价(元)"
              v-model="vip_money"
              oninput="if(value.length>5)value=value.slice(0,5)"
            >
          </div>
        </div>
        <!-- list end -->
        <!-- list -->
        <div class="form_list" style="margin-bottom:.5rem;">
          <div class="form_list_left" style="width:35%">商品库存（选填）</div>
          <div class="form_list_center" style="width:65%">
            <input
              type="number"
              placeholder="请输入库存数量(件)"
              v-model="stock"
              oninput="if(value.length>5)value=value.slice(0,5)"
            >
          </div>
        </div>
        <!-- list end -->
        <!-- list -->
        <div class="form_list" style="margin-bottom:.5rem;" @click="showFyong">
          <div class="form_list_left" style="width:35%">协助推广/销售让利</div>
          <div class="form_list_center" style="width:55%">
            <span v-text="fYong==''?'让利=(商品价格*折扣比率)':fYong"></span>
          </div>
          <div class="form_list_right" style="width:10%"></div>
        </div>
        <!-- list end -->
        <!-- list -->
        <div class="form_list" style="margin-bottom:.5rem">
          <div class="form_list_left">商品运费</div>
          <div class="form_list_center">
            <input
              type="number"
              placeholder="请输入运费，默认为0(元)"
              v-model="fare_money"
              oninput="if(value.length>11)value=value.slice(0,11)"
            >
          </div>
        </div>
        <!-- list end -->
        <!-- list -->
        <div class="form_list" style="margin-bottom:.5rem;" @click="showSpec_ev" v-if="goods_id!=0">
          <div class="form_list_left" style="width:35%">编辑规格型号</div>
          <div class="form_list_center" style="width:55%"></div>
          <div class="form_list_right" style="width:10%">
            <i class="iconfont iconrightArrow"></i>
          </div>
        </div>
        <!-- list end -->
        <!-- list -->
        <div class="form_list" style="margin-bottom:.5rem;" @click="showDesc_ev" v-if="goods_id!=0">
          <div class="form_list_left" style="width:35%">编辑商品详情</div>
          <div class="form_list_center" style="width:55%"></div>
          <div class="form_list_right" style="width:10%">
            <i class="iconfont iconrightArrow"></i>
          </div>
        </div>
        <!-- list end -->
        <div class="save_btn" @click="addGodds()">
          <span v-text="this.$route.query.goods_id!=0?'保存':'确定'">确定</span>
        </div>
        <!-- 弹窗 -->
        <van-popup v-model="showClass" position="bottom" :overlay="true">
          <getClass @getClass="getClass"/>
        </van-popup>
        <van-popup v-model="showSpec" position="bottom" :overlay="true">
          <Spec @saveSpec="saveSpec" @closeSpec="closeSpec" :goods_id="goods_id"/>
        </van-popup>
        <!-- 协助推广让利弹窗 -->
        <van-popup v-model="isFyong" position="bottom" :overlay="true">
          <van-picker
            show-toolbar
            title="推广让利"
            :columns="columns"
            @cancel="onCancel"
            @confirm="onConfirm"
          />
        </van-popup>
        <!-- 商品详情编辑 -->
        <van-popup v-model="showDesc" position="bottom" :overlay="true">
          <goodsDesc
            :goods_desc="goods_desc"
            :goods_id="goods_id"
            @hideDesc="hideDesc"
            @saveDesc="saveDesc"
          />
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
import getClass from "./getClassify";
import Spec from "./spec";
import upFile from "@/assets/js/upFile";
import goodsDesc from "./goods_desc";
export default {
  data() {
    return {
      shop_name: "", //商品名称
      shop_message: "", //商品说明
      shop_money: "", //销售价
      scj_money: "", //市场价
      showClass: false, //是否展示分类
      showSpec: false, //是否展示规格
      shopImage: [], //商品图片列表
      goods_category_id: -1, //选择分类的id
      goods_class_name: "", //选择分类的名称
      vip_money: "", //vip折扣
      stock: "", //库存
      goods_id: 0,
      fare_money: "", //运费
      isFyong: false,
      columns: [
        "3%",
        "4%",
        "5%",
        "6%",
        "7%",
        "8%",
        "9%",
        "10%",
        "11%",
        "12%",
        "13%",
        "14%",
        "15%",
        "16%",
        "17%",
        "18%",
        "19%",
        "20%"
      ],
      fYong: "", //分佣让利
      goods_desc: "", //商品详情
      showDesc: false,
      back_num: -1 //返回的层数
    };
  },
  mounted() {
    if (this.$route.query.goods_id != 0) {
      //编辑商品
      this.goods_id = this.$route.query.goods_id;
      this.getGoods_detail();
    } //新增，不显示规格
    if (this.$route.query.from == "success_goods") {
      this.back_num = -3;
    }
  },
  methods: {
    // 展示商品详情
    showDesc_ev() {
      this.showDesc = true;
    },
    // 隐藏
    hideDesc() {
      this.showDesc = false;
    },
    // 保存商品详情
    saveDesc(data) {
      this.goods_desc = data;
      this.showDesc = false;
    },
    // 取消分佣
    onCancel() {
      this.fYong = "";
      this.isFyong = false;
    },
    onConfirm(data) {
      console.log(data);
      this.fYong = data;
      this.isFyong = false;
    },
    showFyong() {
      this.isFyong = true;
    },
    // 确定分佣
    // 获取商品信息
    getGoods_detail() {
      this.appJS.ajax(
        "user.get_goods_info",
        "post",
        {
          goods_id: this.$route.query.goods_id
        },
        res => {
          if (res.recode == 1) {
            let goods_info = res.data.goods_info;
            this.goods_category_id = goods_info.goods_category_id;
            this.shop_message = goods_info.goods_explain;
            this.fare_money = goods_info.goods_express_fee;
            this.shopImage = goods_info.goods_image;
            this.scj_money = goods_info.goods_market_price;
            this.shop_name = goods_info.goods_name;
            this.shop_money = goods_info.goods_price;
            this.vip_money = goods_info.goods_vip_price;
            this.stock = goods_info.goods_stock;
            this.goods_desc = goods_info.goods_desc;
            this.fYong = goods_info.goods_concession;
            this.goods_class_name = goods_info.goods_category_name;
          }
        }
      );
    },
    // 保存商品
    addGodds() {
      if (this.shopImage.length == 0) {
        this.$toast("您必须要上传一张商品图片");
        return;
      } else if (this.goods_category_id == -1) {
        this.$toast("请选择商品分类");
        return;
      } else if (this.shop_name == "") {
        this.$toast("请输入商品名称");
        return;
      } else if (this.shop_message == "") {
        this.$toast("简单介绍一下商品吧");
        return;
      } else {
        let url = ""
        if(this.$route.query.goods_id == 0){
          url = "user.goods_add_post"
        }else{
          url = "user.goods_desc_edit_post"
        }
        this.appJS.ajax(
          url,
          "post",
          {
            store_id: this.appJS.getStorage("store_info").store_id,
            goods_image: this.shopImage.join("|"),
            goods_category_id: this.goods_category_id,
            goods_name: this.shop_name,
            goods_explain: this.shop_message,
            goods_market_price: this.scj_money,
            goods_price: this.shop_money,
            goods_vip_price: this.vip_money,
            goods_stock: this.stock,
            goods_express_fee: this.fare_money,
            goods_concession: this.fYong
          },
          res => {
            if (res.recode == 1) {
              if (this.$route.query.from == "success_goods") {
                this.$router.go(-3);
              } else {
                if (this.$route.query.goods_id == 0) {
                  this.$router.push({
                    path: "/success_goods",
                    query: { goods_id: res.data.goods_id }
                  });
                } else {
                  this.$router.go(-1);
                }
              }
            }
          }
        );
      }
    },
    // 删除图片
    delImage(index) {
      this.shopImage.splice(index, 1);
    },
    getClass(goods_category_id, goods_class_name) {
      this.showClass = false;
      this.goods_category_id = goods_category_id;
      this.goods_class_name = goods_class_name;
    },
    //   选择商品分类
    showClass_ev() {
      this.showClass = true;
    },
    // 添加规格
    showSpec_ev() {
      this.showSpec = true;
    },
    //关闭添加规格
    closeSpec() {
      this.showSpec = false;
    },
    // 保存后获取规格
    saveSpec() {
      this.showSpec = false;
    },

    onRead(file) {
      if (file.file) {
        if (this.shopImage.length >= 9) {
          this.$toast("您最多可以上传9张商品图片");
          return;
        }
        let params = new FormData();
        params.append("image0", file.file);
        params.append("token", this.appJS.userInfo.token);
        params.append("os", this.appJS.config.os);
        upFile.post("user.upload_image", params, res => {
          this.$set(this.shopImage, this.shopImage.length, res.data.images);
        });
      } else {
        if (file.length > 9) {
          this.$toast("您最多可以上传9张商品图片");
          return;
        } else if (file.length + this.shopImage.length > 9) {
          this.$toast("您最多可以上传9张商品图片");
          return;
        }
        for (let i in file) {
          let params = new FormData();
          params.append("image0", file[i].file);
          params.append("token", this.appJS.userInfo.token);
          params.append("os", this.appJS.config.os);
          upFile.post("user.upload_image", params, res => {
            this.$set(this.shopImage, this.shopImage.length, res.data.images);
          });
        }
      }
    }
  },
  components: {
    Head,
    getClass,
    Spec,
    goodsDesc
  }
};
</script>

<style lang='less'>
.add_goods {
  .form {
    .save_btn {
      height: 20vw;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        background: @actColor;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 12vw;
        width: 90%;
        color: #fff;
        font-size: 0.8rem;
        border-radius: 100px;
      }
    }
    .image_box {
      height: 28vw;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      overflow-x: auto;
      background: #fff;
      &::-webkit-scrollbar {
        display: none;
      }
      .m {
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        &:last-child {
          margin-right: 3vw;
        }
        img {
          height: 1.5vw;
          width: 1.5vw;
        }
      }
      .image_list {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.5vw;
        position: relative;
        .del {
          position: absolute;
          height: 1.5rem;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          bottom: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.4);
          .iconfont {
            font-size: 0.8rem;
            color: #fff;
          }
        }
        &:last-child {
          margin-right: 3vw;
        }
        img {
          height: 22vw;
          width: 22vw;
          border-radius: 6px;
        }
      }
    }
    .form_list {
      height: 3.5rem;
      width: 100%;
      padding: 0 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #888;
      background: #fff;
      border-bottom: 1px solid #efefef;
      flex-wrap: wrap;
      &:last-child {
        border: 0;
      }

      .form_list_left {
        height: 100%;
        width: 30%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.8rem;
        color: #000;
      }
      .form_list_center {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        font-size: 0.7rem;
        img {
          height: 2.5rem;
          width: 2.5rem;
        }
        input {
          height: 90%;
          width: 100%;
          font-size: 0.7rem;
        }
      }
      .form_list_right {
        height: 100%;
        width: 20%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .iconfont {
          font-size: 1.4rem;
        }
        .iconLogonClosed {
          font-size: 1.1rem;
        }
        span {
          font-size: 0.7rem;
          color: @actColor;
          padding: 0.1rem 0.5rem;
          border: 1px solid @actColor;
          border-radius: 4px;
        }
      }
    }
    .city_show {
      min-height: 3rem;
      width: 100%;
      padding: 0.5rem;
      font-size: 0.8rem;
      color: #888;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: #fff;
      border-bottom: 1px solid #efefef;
    }
    .text_box {
      height: 15vw;
      padding: 0.5rem;
      background: #fff;
      font-size: 0.8rem;
      border-bottom: 1px solid #efefef;
      color: #888;
      textarea {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
